<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <select id="city" size="4" multiple>
    <option value="BJ">北京</option>
    <option value="SH">上海</option>
    <option value="GZ">广州</option>
    <option value="SZ">深圳</option>
  </select>
  <input type="button" value="提交" onclick="a();">
</body>

</html>
<script>
  function a() {
    var obj = document.getElementById("city");
    //单选
    // var index = obj.selectedIndex;//只能获取选中项的第一个索引
    // if (index >= 0) {
    //   var text = obj.options[index].text;
    //   var value = obj.options[index].value;
    //   alert("索引：" + index + "文本:" + text + "值：" + value);
    // }
    // else {
    //   alert("请选择城市")
    // }

    //多选
    for (var i = 0; i < obj.options.length; i++) {
      if (obj.options[i].selected) {
        var text = obj.options[i].text;
        var value = obj.options[i].value;
        console.log("索引：" + i + "文本:" + text + "值：" + value);
      }
    }
  }
</script>